<template>
  <h4 class="color">{{ msg }} - {{ time }}</h4>
  <button @click="bao">爆炸</button>
  <button @click="changeColor">变色</button>
</template>
<script setup>
import { ref, reactive, defineProps, defineEmits, defineExpose } from 'vue'
// 接收父组件传递进来的参数
defineProps({
  msg: {
    type: String,
    default: '李诗晴'
  },
  time: {
    type: String,
    default: '42分钟'
  }
})
// 将子组件要抛出的方法名称用一个字符串数组，以参数的方式传递给defineEmits函数，并用一个变量名接收
let $emit = defineEmits(['bao'])

let info = reactive({
  name: '李诗晴',
  msg: '喜欢'
})

let notmsg = ref('test')

// 定义颜色变量
let stateStyle = reactive({
  color: 'red',
  fontSize: '20px'
})

function changeColor() {
  stateStyle.color = 'blue'
  stateStyle.fontSize = '30px'
}

function bao() {
  $emit('bao', '子组件触发')
}

function police() {
  return '肖鹤云报警'
}

// 对外暴露属性和方法
defineExpose({
  info,
  police
})
</script>

<style scoped>
.color {
  color: v-bind('stateStyle.color');
  font-size: v-bind('stateStyle.fontSize');
}
</style>